<template>
  <div>
    <van-nav-bar
      title="发货信息"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-search
      placeholder="请输入客户名称"
      @search="search"
      v-model="queryParam.Keyword"
      @clear="clear"
    />
    <div class="outerBox">
      <div
        @click="Edit(item.DLID)"
        class="Informationbox"
        v-for="item in data"
        :key="item.Id"
      >
        <div class="Father">
          <!-- <img
            src="http://36.156.144.139:9000/img/yuangongDef.65d8327a.jpg"
            alt=""
          /> -->
          <div>
            <div class="companyName">{{ item.cCusName }}</div>
            <div style="margin-left:10px">客户编码：{{ item.cCusCode }}</div>
            <div class="cCusOAddress">发往地址：{{ item.cShipAddress }}</div>
          </div>
        </div>
        <!-- 金额合计:{{ item.TotalAmount }} 客户经理:{{ item.AccountManager }} -->
      </div>
    </div>
    <PaginationCom :pagination="pagination" :Total="Total" :thisOjb="this" />
    <Edit :parentObj="this" ref="edit" />
  </div>
</template>

<script>
import { Card } from "vant";
import { Search, NavBar, Pagination } from "vant";
import Edit from "./Edit.vue";
import PaginationCom from "../../components/PaginationCom.vue";
export default {
  components: {
    PaginationCom,
    "van-pagination": Pagination,
    "van-nav-bar": NavBar,
    "van-card": Card,
    "van-search": Search,
    Edit
  },
  data() {
    return {
      pagination: {
        current: 1,
        pageSize: 15,
        showTotal: (total, range) =>
          `总数:${total} 当前:${range[0]}-${range[1]}`,
        pageSizeOptions: ["15", "30", "60"], // 设置pageSize的可选值，页面可以通过下拉框进行选择
        showSizeChanger: true
      },
      Total: 0,
      cc: true,
      Keyword: "",
      data: [],
      queryParam: {}
    };
  },
  created() {
    this.getDataList();
  },
  methods: {
    paginationchange(a) {
      // a:当前选中页码
      this.pagination.current = a;
      this.getDataList();
    },
    clear() {
      console.log(123);
      this.queryParam = {};
      this.getDataList();
    },

    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      this.$refs.edit.openForm();
    },
    //弹出页面
    Edit(Id) {
      this.$refs.edit.openForm(Id);
    },
    //搜索
    search(value) {
      this.queryParam.Condition = "cCusName";
      this.queryParam.Keyword = value;
      this.getDataList();
    },

    getDataList() {
      this.selectedRowKeys = [];

      this.loading = true;
      this.http
        .post("OrderManagement/DispatchList/GetDataList", {
          PageIndex: this.pagination.current,
          PageRows: this.pagination.pageSize,
          SortField: "Id",
          SortType: "asc",
          Search: this.queryParam
        })
        .then(resJson => {
          this.data = resJson.Data;
          this.Total = resJson.Total;
        });
    }
  }
};
</script>

<style scoped>
.cCusOAddress {
  margin-left: 10px;
  padding-bottom: 10px;
}
.pagination {
  position: absolute;
  bottom: 5px;
  right: 20%;
}
.outerBox {
  height: calc(100vh - 140px);
  padding-bottom: 50px;
  box-sizing: border-box;
  overflow: auto;
}
.companyName {
  margin-bottom: 3px;
  font-size: 18px;
  margin-left: 10px;
  margin-top: 5px;
}
.Informationbox {
  margin: 3px auto;
  padding-top: 10px;
  box-shadow: 2px 2px 5px #ccc;
  border-radius: 5px;
  width: 95%;
  /* height: 100px; */
  margin-bottom: 10px;
  margin-top: 0px;
}
img {
  width: 100px;
  height: 100px;
}
.Father {
  display: flex;
}
</style>
